import React from 'react';
import axios from 'axios';
import { apiPrefix } from 'shared/api';
import Td from './TableTr';
import './index.less';

export default class ContractType extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      newContractType: {},
      contractType: [],
      show: false,
      showEditInput: [],
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/contract/categories`;
    axios.get(api)
      .then((response) => {
        this.setState({ contractType: response.data.data });
      });
  }
  showAddInput=() => {
    this.setState({ show: true });
  }
  handleOnChange=(value, key) => {
    const { newContractType } = this.state;
    newContractType[key] = value;
    this.setState({ newContractType: { ...this.state.newContractType } });
    console.log(newContractType);
  }
  addNewContractType=() => {
    console.log(this.state.newContractType);
    const api = `${apiPrefix}api/v1/contract/category`;
    axios.post(api, this.state.newContractType)
      .then((response) => {
        console.log(response);
        this.setState({ show: false, newContractType: {} });
        this.componentDidMount();
      });
  }
  cancelAdd=() => {
    this.setState({ show: false, newContractType: {} });
  }
  edit=(index) => {
    const { showEditInput } = this.state;
    console.log(index);
    showEditInput.push(index);
    this.setState({ showEditInput: [...this.state.showEditInput] });
    console.log(showEditInput);
  }
  cancelEdit=(index) => {
    console.log(index);
    const { showEditInput } = this.state;
    const newShowEditInput = showEditInput.filter(val => val !== index);
    console.log(showEditInput.filter(val => val !== index));
    this.setState({ showEditInput: newShowEditInput });
  }

  sureEdit=(val) => {
    console.log(val);
    const api = `${apiPrefix}api/v1/contract/category`;
    axios.put(api, val)
      .then((response) => {
        console.log(response.status === 200);
        if (response.status === 200) {
          this.componentDidMount();
        }
      });
  }
  render() {
    const { contractType, show, newContractType, } = this.state;
    return (
      <div className="content">
        <div>
          <h3>合同类型管理</h3>
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>名称</th>
                <th>描述/备注</th>
                <th>
                  <button onClick={this.showAddInput} className="addButton">新增</button>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr className={show ? 'add-contract-type' : 'hide'}>
                <td />
                <td>
                  <input
                    value={newContractType.name || ''}
                    type="text"
                    onChange={e => this.handleOnChange(e.target.value, 'name')}
                  />
                </td>
                <td>
                  <input
                    type="text"
                    value={newContractType.descr || ''}
                    onChange={e => this.handleOnChange(e.target.value, 'descr')}
                  />
                </td>
                <td>
                  <button className="green-button" onClick={this.addNewContractType}>保存</button>
                  <button className="clearButton" onClick={this.cancelAdd}>取消</button>
                </td>
              </tr>

              {
                contractType.map((value, index) => (
                  <tr key={index}>
                    <Td
                      sureEdit={val => this.sureEdit(val)}
                      value={value}
                      index={index}
                    />
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}
